.headBox{
	height: 0.88rem;
	display: flex;
	margin: 0 0.3rem;
	justify-content: space-between;
	align-items: center;
	.titleBox{
		position: relative;
		width: 1.6rem;
		height: 0.59rem;
		.line{
			position: absolute;
			width: 1.56rem;
			height: 0.16rem;
			background: #60A7F6;
			opacity: 0.48;
			bottom:0.08rem;
			left: 0;
		}
		.title{
			color: #1E2023;
			font-size: 0.4rem;
		}
	}
	.iconBox{
		display: flex;
		justify-content: space-between;
		width: 1.36rem;
		.searchBox{
			width: 0.44rem;
			height: 0.44rem;
			background: url(../img/community/nav%20bar_icon_search.png) no-repeat;
		}
		.messBox{
			width: 0.44rem;
			height: 0.44rem;
			background: url(../img/community/nav%20bar_icon_comment.png) no-repeat;
		}
	}
}

.bg{
	height: 5.62rem;
	position: relative;
	background: url(../img/community/community_photo_banner.png) no-repeat;
	background-size: cover;
	.communityUl{
		position: absolute;
		width: 6.9rem;
		height: 1.46rem;
		display: flex;
		box-shadow: 0px 10px 20px rgba(112, 144, 176, 0.08);
		border-radius: 0.2rem;
		margin: 0 0.3rem;
		justify-content: space-around;
		bottom: -0.64rem;
		z-index: 30;
		background-color: #fff;
		li{
			text-align: center;
			font-size: 0.24rem;
			color:#1E2023;
			.icon{
				width: 0.6rem;
				height: 0.6rem;
				margin: 0 auto;
				margin-top: 0.26rem;
			}
			.communLike{
				background: url(../img/community/community_icon_same%20hobby.png) no-repeat;
				background-size: cover;
			}
			.topicCamp{
				background: url(../img/community/community_icon_topic%20camp.png) no-repeat;
				background-size: cover;
			}
			.rakeList{
				background: url(../img/community/community_icon_ranking%20List.png) no-repeat;
				background-size: cover;
			}
			.signSale{
				background: url(../img/community/community_icon_contract%20drawing.png) no-repeat;
				background-size: cover;
			}
		}
	}
}

.allSay{
	.titleBox{
		height: 0.54rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0.3rem;
		margin-top: 1.54rem;
		.leftBox{
			display: flex;
			align-items: center;
			.line{
				width: 8px;
				height: 40px;
				background: #60A7F6;
				border-radius: 0.04rem;
			}
			.title{
				margin-left: 0.08rem;
				font-size: 0.36rem;
				color:#1E2023;
			}
		}
		.moreBox{
			display: flex;
			align-items: center;
			.text{
				font-size: 0.24rem;
				color:#60A7F6;
			}
			.moreIcon{
				margin-left: 0.02rem;
				width: 0.32rem;
				height: 0.32rem;
				background: url(../img/cate/home_icon_more.png) no-repeat;
				background-size: cover;
			}
		}
	}
	.allSayUl{
		display: flex;
		overflow-x: scroll;
		margin-left: 0.3rem;
		margin-top: 0.24rem;
		.allSayLi{
			position: relative;
			width: 6.04rem;
			height: 4.3rem;
			flex-shrink: 0;
			margin-right: 0.18rem;
			.bg{
				width: 100%;
				height: 100%;
			}
			.infoBox{
				position: absolute;
				height: 1.2rem;
				bottom: 0;
				left: 0.3rem;
				.title{
					font-size: 0.28rem;
					color:#fff;
					margin-top: 0.23rem;
				}
				.text{
					font-size: 0.18rem;
					color:#fff;
					margin-top: 0.03rem;
				}
			}
			.labelUl{
				position: absolute;
				bottom: 1.2rem;
				left: 0.3rem;
				.labelLi{
					width: 1.76rem;
					height: 0.4rem;
					position: relative;
					border-radius: 0.2rem;
					display: flex;
					align-items: center;
					margin-bottom: 0.19rem;
					line-height: 0.4rem;
					.labelImg{
						width: 0.24rem;
						height: 0.24rem;
						border-radius: 50%;
						margin-left: 0.12rem;
					}
					.label{
						font-size: 0.24rem;
						color:#fff;
						margin-left: 0.07rem;
					}
				}
				.labelLi::after{
					content:"";
					display: block;
					width: 1.76rem;
					height: 0.4rem;
					background: rgba(255,255,255,0.3);
					position: absolute;
					top: 0;
					left: 0;
					border-radius: 0.2rem;
				}
			}
		}
	}
	.allSayUl::-webkit-scrollbar {display:none}
}

.dynamicBox{
	margin-top: 0.8rem;
	.titleBox{
		.titleUl{
			display: flex;
			margin-left: 0.3rem;
			li{
				font-size:0.28rem ;
				color:#1E2023;
				margin-right: 0.4rem;
			}
			.currentTitle{
				font-size: 0.3rem;
				position: relative;
				font-weight: 500;
			}
			.currentTitle::after{
				content:"";
				position: absolute;
				width: 0.84rem;
				height: 0.08rem;
				background: #60A7F6;
				border-radius: 0.06rem;
				bottom:-0.1rem;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	.contentUl{
		display: flex;
		margin: 0 0.3rem;
		justify-content: space-between;
		margin-top: 0.48rem;
		ul{
			display: flex;
			flex-direction: column;
			width: 3.36rem;
			li{
				margin-bottom: 0.3rem;
				.imgBox{
					position: relative;
					.img{
						width: 100%;
						height: 100%;
						display: block;
					}
					.iconBox{
						position: absolute;
						bottom: 0.09rem;
						right: 0.1rem;
						display: flex;
						align-items:center;
						.icon{
							width: 0.28rem;
							height: 0.28rem;
							background: url(../img/community/icon_number%20of%20images.png) no-repeat;
							background-size: cover;
						}
						.count{
							font-size: 0.2rem;
							color:#fff;
						}
					}
				}
				.text{
					margin-top: 0.2rem;
					font-size: 0.24rem;
					color:#1E2023;
				}
				.infoBox{
					display: flex;
					justify-content: space-between;
					margin-top: 0.21rem;
					.info{
						display: flex;
						.headImg{
							width: 0.3rem;
							height: 0.3rem;
							border-radius: 50%;
							margin-right: 0.08rem;
						}
						.name{
							font-size: 0.2rem;
							color:#68707A;
						}
					}
					.likeBox{
						display: flex;
						align-items: center;
						.likeIcon{
							width: 0.36rem;
							height: 0.36rem;
							background-size: cover;
							background-repeat: no-repeat;
							margin-right: 0.05rem;
						}
						.hasLike{
							background-image: url(../img/community/popular%20trends_icon_like_pre.png);
						}
						.notLike{
							background-image: url(../img/community/popular%20trends_icon_like_nor.png);
						}
						.likeCount{
							font-size: 0.22rem;
							color:#68707A;
						}
					}
				}
			}
		}
	}
}